<template>
  <nav>
    <div class="nav_in">
      <ul class="tanxing">
        <li @click="$router.push('/')"><em>推荐</em></li>
        <li @click="$router.push('/paihang')">
          <em>排行榜</em>
        </li>
        <li @click="$router.push('/mymusic')"><em>歌单</em></li>
        <li @click="$router.push('/zhubo')"><em>主播电台</em></li>
        <li @click="$router.push('/singer')"><em>歌手</em></li>
        <li @click="$router.push('/new')"><em>新碟上架</em></li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {


    }

  },


}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
nav {
  background-color: #c20c0c;
  .nav_in {
    height: 34px;
    margin: 0 85.5px;
  }
  ul {
    width: 744px;
    padding-left: 230px;
    li {
      padding: 0 13px;
      line-height: 34px;
      font-size: 12px;
      color: #fff;
      em {
        display: inline-block;
        height: 20px;
        padding: 0 13px;
        margin: 7px 17px 0;
        border-radius: 20px;
        line-height: 21px;
        font-style: normal;
        &:hover {
          background-color: #9b0909;
        }
      }
    }
  }
}
</style>